<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/购物车.css">
    <link rel="stylesheet" href="css/qingchu.css">
</head>

<body>
    <header></header>
    <div class="top">
        <div class="top_cent">
            <ul class="top_cent_left">
                <li><a href="#">收藏</a></li>
            </ul>
            <ul class="top_cent_right">
                <li><a href="3.登录界面.html" id="nihao">你好，请登录 </a>&nbsp;&nbsp;
                    <a href="注册页面.html">免费注册</a>
                </li>
                <li>
                    <span></span>
                    <a href="#">会员中心</a>
                </li>
                <li>
                    <span></span>
                    <a href="#">客户服务</a>
                </li>
            </ul>
        </div>
    </div>
    <nav>
        <div class="nav_left">
            <a href="2.leshishouye.html"><img style="width: 162px;
            height: 60px;" src="https://www.lemall.com/static/img/letvlogo.df7e18e.png" alt=""></a>
        </div>
        <div class="nav_right">
            <ul class="nav_right_ul">
                <li style="background-color: #ff8000;">1.我的购物车</li>
                <li>2.确认订单信息</li>
                <li>3.成功提交订单</li>
            </ul>
        </div>
    </nav>
    <main>
        <p>全部商品<span>1</span></p>
    </main>
    <div id="centent">
        <div class="caidan">
            <span style="margin-left: 7px;"><input type="checkbox">&nbsp;全选</span>
            <span style="margin-left: 70px;">商品</span>

            <span style="margin-left: 490px;">单价(元)</span>
            <span style="margin-left: 110px;">数量</span>
            <span style="margin-left: 90px;">小计(元)</span>
            <span style="margin-left: 150px;">操作</span>
        </div>
        <div class="gwc_box_top">
            <a href="#">乐视商城官方旗舰店</a>
        </div>
        <div class="gwc_box_top_zongji"></div>
    </div>


    <div class="gwc_box">

    </div>
    <div class="foot">
        <div class="jiesuan">
            <div class="quanxuan">
                <input type="checkbox">
                <span>全选</span>
            </div>
            <div class="jiesuan_right1">

                <div class="jiesuan_you">结算</div>


                <div class="jiesuan_cent">
                    <p>总价（不含运费）：￥<span id="zongji" style="color: red;font-size: 16px;font-weight: 700;">0</span></p>
                    <p>以节省：<span>￥-0</span></p>
                </div>
                <div class="jiesuan_zuo">
                    已选择<span>1</span>件商品
                </div>
            </div>
        </div>
    </div>
    <footer></footer>
</body>

</html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    $("footer").load("3.foot.html");
</script>
<script>
    // $("header").delegate(".nav","mouseover",function(){
    //     $(".navsort_cent_quanbu_select").css({
    //         display:"none"
    //     })
    // })
</script>
<script src="goodsAndShoppingCart/js/cookieTools.js"></script>
<script>
    $(function() {
        getData()
    })

    function getData() {
        $.get("goodsAndShoppingCart/getShoppingCart.php", {
                "vipName": location.search.split('=')[1]
            },
            function(data) {
                console.log(JSON.parse(data));
                let arr = JSON.parse(data);
                let str = ''
                arr.forEach((item, index) => {
                    str += `<div class="shangpin">
            <div class="shangpin_select">
                <input type="checkbox" checked="checked">
            </div>
            <div class="shangpin_img">
                <img id="Img1" src="${item.goodsImg}"
                    alt="">
                <span>${item.goodsName}</span>
            </div>
            <div class="null"></div>
            <div class="shangpin_danjia">
                <strong>${item.goodsPrice}</strong>
            </div>
            <div class="jiajian">
                <div class="jiajian_input">
                    <button class="b1" sPrice="${item.goodsPrice}">-</button>
                    <input class="b2" type="text" value="${item.goodsCount}" class="sCount">
                    <button class="b3" sPrice="${item.goodsPrice}">+</button>
                </div>
                <div class="kucun">
                    库存量<span>${item.beiyong1}</span>
                </div>
            </div>  
            <div class="xiaoji">
              <span  style="padding-left: 3px;">${item.goodsPrice*item.goodsCount}</span>
              <br>
              <span>已省:0</span>
            </div>
            <div class="del"><a goodsid="${item.goodsId}" href="#">删除</a></div> 
        </div>
        
             
             `
                })

                $(".gwc_box").html(str);


            })

    }
    $(".gwc_box").on("click", function(e) {
        if (e.target.nodeName == "A") {
            console.log(e.target.getAttribute("goodsid"));
            $.get("goodsAndShoppingCart/deleteGoods.php", {
                    "vipName": getCookie("usernum"),
                    "goodsId": e.target.getAttribute("goodsid")
                },
                function(resText) {
                    console.log(resText);
                    if (resText.trim() == "1") {
                        window.location.reload();
                    } else {
                        alert("删除失败");
                    }
                })
        }
        if (e.target.className == "b1") {
            //单价
            var sPrice = e.target.getAttribute("sPrice");

            //数量
            var num = e.target.nextElementSibling;
            num.value = num.value - 1;

            if (num.value <= 0) {
                num.value = 0;
            }

            //小计

            let a = e.target.parentElement.parentElement.nextElementSibling.firstElementChild.innerHTML = sPrice * num.value;

            $("#zongji").html(a)
        }
        if (e.target.className == "b3") {
            //单价
            var sPrice = e.target.getAttribute("sPrice");

            //数量
            var num = e.target.previousElementSibling;
            num.value = num.value / 1 + 1 / 1;



            //小计

            let a = e.target.parentElement.parentElement.nextElementSibling.firstElementChild.innerHTML = sPrice * num.value;
            $("#zongji").html(a);

        }


    })
</script>